<template>
  <div >
    <div class="JS_container">
      <Card class="card">
        <div class="searchTmInput marginB20">
          <Input size="large" placeholder="点击上传图片,自动检索商标" readonly>
            <!-- <Icon type="md-images" slot="prefix" /> -->
            <div slot="prepend" class="pointer textLeft" @click="f_45BoxC=!f_45BoxC" style="width:130px;">
              第{{fcgnum}}类 - {{owrX()}}
              <Icon :type="(!!f_45BoxC)?'ios-arrow-up':'ios-arrow-down'" class="pullRight" />
            </div>
          </Input>
          <input ref="wj" type="file" class="InputFileBox" @change="file_Up($event)" accept="image/*" 
            style="width:355px;left: 145px;"
          />
          <div v-show="f_45BoxC">
            <div class="f_45ModalBox textLeft" style="width:700px;">
              <Button
                  v-for="(val) in listcCm"
                  :key="'dr'+val.fcgid"
                  shape="circle"
                  :type="fcgnum==val.fcgnum?'primary':'text'"
                  @click="werC(val.fcgnum)"
              >
                  第{{val.fcgnum}}类 - {{val.fcgname}}
              </Button>
            </div>
            <div class="f_45MoBg"  @click="f_45BoxC=false"></div>
          </div>
        </div>
        

        <div v-show="!loading && $app.judgeData(result)">
          <ul class="search-list">
            <ComList :result="result"/>
          </ul>
        </div>
        <div class="f_24 lineH2 cCCC textLeft" v-show="!loading && !$app.judgeData(result)">暂无结果</div>
        <div class="f_24 lineH2 cCCC textLeft" v-show="loading">正在加载...</div>

        <!--            <div class="page">-->
        <!--                <Page :total="total" show-sizer size="small"-->
        <!--                      :page-size="pageSize"-->
        <!--                      :page-size-opts="$app.pageAll.pageSizeOpts"-->
        <!--                      :current='page'-->
        <!--                      @on-change="loadMore"-->
        <!--                      @on-page-size-change="changePageSize"-->
        <!--                ></Page>-->
        <!--            </div>-->
      </Card>
    </div>
    

    <!-- 图片裁切框 -->
    <CutImg ref="CutImg" @tmCutFun="tmCutFun" />


    <!-- 右上角要搜索的图片 -->
    <div
      class="rMoneyBox padding10"
      :style="`width:${suoJ?'150px':'50px'}; height:${suoJ?'auto':'50px'};`"
    >
      <div v-show="suoJ">
        <div class="f_16  c333 marginB10 ">搜索图片</div>
        <img :src="fixedImg" >
      </div>
      <Icon 
        :type="`${suoJ?'ios-arrow-dropright':'ios-arrow-dropleft-circle'}`"
        size="28"
        class="pointer suoJ "
        :class="`${suoJ?' cCCC':' cBlue'}`"
        @click="suoJ=!suoJ"
        style="top:10px;"
      />
    </div>
  </div>
</template>

<style lang="less" scoped> 
@import '../less/fenLei45.less';
</style>

<script>
import ComList from "./common/comList";
import CutImg from "@$@/_tool/cutImg";
export default {
  
  name: "TrademarklistsImg",
  components: { CutImg,ComList},
  data() {
    let {
      $route: {
        query: {
          str,
          fcgnum
        }
      }
    } = this;
    let strJ=JSON.parse(str);
    let {
      file_path:img_path,
      file_url:fixedImg
    }=strJ;
    return {
      fcgnum,//分类型
      listcCm:[],// 商标45类，只有第一级
      f_45BoxC:false,//45类弹框，隐藏

      suoJ:true,//右上角图片是否显示
      fixedImg,
      img_path,
      loading: true, //正在加载中
      result: [], // 搜索结果

      page: 1, // 当前页数
      // pageSize: $app.pageAll.pageSize, // 默认数据返回条数
      pageSize: 30, // 默认数据返回条数
      total: 0, // 所有数据条数
      total_page: 0, // 所有页面
      itemNum: 0, // 选择
      placeholder: "" //
    };
  },
  created(){
    // 获取45类分类 第一级
    $ajax.mGlistAll({
      fcgparent:0
    },resData=>{
      this.listcCm=resData;
    });
  },
  // 挂载
  mounted() {
    this.getTmList();
  },
  // 绑定方法
  methods: {
    //45类选择框
    werC(num){
      this.fcgnum=num;
      this.f_45BoxC=false;
    },
    owrX(){
      let {
          fcgnum,
          listcCm
      }=this;
      let out='';
      for (let i=0; i < listcCm.length; i++) {
        if(fcgnum==listcCm[i].fcgnum){
          out=listcCm[i].fcgname;
          break;
        }
      }
      return out;
    },

    // 搜索
    search() {},
    // 第一次获取数据
    getTmList() {
      let {
        img_path,
        page,
        pageSize,
        fcgnum:inter_type
      } = this;

      this.result = [];
      this.loading = true;

      $ajax.lb_getImgSearch({ img_path,  page, pageSize,inter_type}, res => {
        this.result = res.data;
        this.loading = false;
        // this.total = res.data.max_total;
        // this.total_page = res.data.total_page;
      });
    },

    // 加载更多
    loadMore(page) {
      this.page = page;
      this.getTmList();
    },
    // 数据返回条
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.getTmList();
    },
    // 图片上传 提交搜索
    tmCutFun(str) {

      let {fcgnum}=this;
      let strJ=JSON.parse(str);
      let {
        file_path:img_path,
        file_url:fixedImg
      }=strJ;
      this.img_path = img_path;
      this.fixedImg = fixedImg;
      this.getTmList();

      // 替换地址栏
      this.$router.replace({
          name: 'TrademarklistsImg',
          query: {
            str,
            fcgnum
          }
      });
    },
    //上传图片
    file_Up(e) {
      let that = this;
      let file = e.target.files[0]; //选中的文件

      //格式判断
      $app.suffix.jpgPng(e, file,false, () => {
        //创建实例
        var reader = new FileReader();
        //异步读取文件内容
        reader.readAsDataURL(file);

        //读取操作成功完成
        reader.onload = e => {
          let result = e.target.result;
          this.$refs['CutImg'].showBox = true;
          this.$refs['CutImg'].inImg = result;
          // console.log('reader = ',e);
        };
      });
    }
  }
};
</script>
